<template>
  <div class="manage-info-container scroll-box">
    <div>
      <div class="search-box">
        <form action="/">
          <van-search
            v-model="searchOptions.searchKey"
            show-action
            shape="round"
            placeholder="搜索设备编号/故障名称/故障代码"
            @search="searchOptions.handleSearch"
            @clear="searchOptions.handleSearch"
          >
            <template #action>
              <div class="filter-box" @click="searchOptions.handleFilter">
                <i class="iconfont iconshaixuan"></i>
                <span>筛选</span>
              </div>
            </template>
          </van-search>
        </form>
      </div>

      <div
        v-for="(item, index) in tableList"
        :key="index"
        class="stay-whole-box"
        @click="onOpenWorkOrderManageDetail(item.id, item.status, item.orderId)"
      >
        <div class="stay-whole-work-box">
          <div class="stay-whole-work-icon-box" v-if="item.type === 1">
            <i class="iconfont iconyubaojing stay-whole-icon-color"></i>
          </div>
          <div class="stay-green-work-icon-box" v-if="item.type === 2">
            <i class="iconfont iconzaixian stay-green-icon-color"></i>
          </div>
          <div class="stay-whole-reight">
            <div class="stay-whole-reight-top">
              <p class="stay-whole-reight-text-left" :title="item.deviceNumber">设备编号：{{ item.deviceNumber }}</p>
              <div class="stay-whole-reight-text-reight" v-if="item.status === 2">
                <div class="whole-work-state-icon-box-wait">
                  <i class="iconfont icondaichuli whole-work-state-icon-color"></i>
                </div>
                待处理
              </div>
              <div class="stay-whole-reight-text-reight" v-else-if="item.status === 1">
                <div class="whole-work-state-icon-box-waitQueren">
                  <i class="iconfont icondaiqueren whole-work-state-icon-color"></i>
                </div>
                待确认
              </div>
              <div class="stay-whole-reight-text-reight" v-else-if="item.status === 5">
                <div class="whole-work-state-icon-box-complete">
                  <i class="iconfont icontianjiawancheng whole-work-state-icon-color"></i>
                </div>
                已完成
              </div>
              <div class="stay-whole-reight-text-reight" v-else-if="item.status === 3">
                <div class="whole-work-state-icon-box-processing">
                  <i class="iconfont iconchulizhong whole-work-state-icon-color"></i>
                </div>
                处理中
              </div>
              <div class="stay-whole-reight-text-reight" v-else-if="item.status === 6">
                <span>已恢复</span>
              </div>
            </div>
            <p class="stay-reight-text-bootem"></p>
            <div class="stay-whole-reight-top">
              <p class="stay-whole-reight-text-bootem-reason">故障名称</p>
              <p class="stay-whole-reight-text-bootem-reason">故障代码</p>
            </div>
            <div class="stay-whole-reight-top">
              <p class="stay-whole-reight-text-bootem-explain">{{ item.errorName }}</p>
              <p class="stay-whole-reight-text-bootem-explain">{{ item.errorCode }}</p>
            </div>
            <div class="stay-whole-reight-top">
              <p class="stay-whole-reight-text-bootem">
                <van-tag type="primary" plain class="color-primary" v-if="item.grade === 1" size="medium">一级</van-tag>
                <van-tag type="primary" plain class="color-primary" v-if="item.grade === 2" size="medium">二级</van-tag>
                <van-tag type="primary" plain class="color-primary" v-if="item.grade === 3" size="medium">三级</van-tag>
                <van-tag type="primary" plain class="color-primary" v-if="item.grade === 4" size="medium">四级</van-tag>
                <van-tag type="primary" plain class="color-primary" v-if="item.grade === 5" size="medium">五级</van-tag>
              </p>
              <p class="stay-whole-reight-text-bootem">{{ item.time }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <SearchFilter v-show="showFilterDevice" @submit="submitFilter(arguments)" @cancel="cancelFilter(arguments)" />
  </div>
</template>

<script>
import SearchFilter from '../components/SearchFilterAlarm.vue';
import { Tab, Tabs, Search, Button, Dialog, Tag, Cell, CellGroup } from 'vant';

import { getAlarmNoticeList } from '@/api/maintenanceAlarmNotification';
// import {
//   getAlarmNoticeList,
//   getNoticeGradeCount,
//   getOrderTop,
//   getYearOrderCount,
//   getNoticeCount,
//   getOrderListByEngineerForApp
// } from '@/api/maintenanceView';
export default {
  name: 'alarmNoticeList',
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Search.name]: Search,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Tag.name]: Tag,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,

    SearchFilter
  },
  data() {
    return {
      active: 0,
      searchOptions: {
        searchKey: '',
        handleSearch: this.handleSearch,
        handleFilter: this.handleFilter
      },
      showFilterDevice: false,
      tag: 2,
      tableList: []
    };
  },
  created() {
    console.log('页面挂载');
    this.getList();
  },
  methods: {
    // 搜索
    handleSearch() {
      // console.log('handleSearch---', this.searchOptions.searchKey);
      this.getList();
    },
    // 筛选
    handleFilter() {
      console.log('handleFilter');
      this.showFilterDevice = true;
    },
    // 确定筛选条件
    submitFilter(pram) {
      this.showFilterDevice = false;
      console.log(pram);
      this.getList(pram[0]);
    },
    cancelFilter() {
      this.showFilterDevice = false;
    },
    //获取列表
    getList(pram) {
      getAlarmNoticeList({ page: 1, page_size: 999, keyword: this.searchOptions.searchKey, ...pram }).then(res => {
        console.log(res);

        if (res.data.list) {
          res.data.list.forEach(item => {
            item.time = new Date(item.time).Format('yyyy/MM/dd hh:mm:ss');
          });
          this.tableList = res.data.list;
        } else {
          this.tableList = [];
        }
      });
    },
    //跳转详情页面
    onOpenWorkOrderManageDetail(id, status, orderId) {
      console.log(id, status, orderId);

      if (this.$checkBtnPermission('maintenanceCenter:alarmNotice:list:detail')) {
        if (status === 1 || status === 2 || status === 6) {
          this.$router.push({
            name: 'alarmNotificationDetail',
            query: {
              id: id
            }
          });
        } else {
          this.$router.push({
            name: 'alarmWorkDetail',
            query: {
              id: orderId
            }
          });
        }
      } else {
        this.$toast(this.$store.state.noDetailPermissionText);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.manage-info-container {
  width: 100%;
  height: 100%;
}

//筛选
.search-box {
  width: 100%;
  height: 1.6rem;
  margin-bottom: 0.213333rem;
  // padding: 0.4rem 0.426667rem;
  background-color: #fff;
  border-top: 1px solid #f2f6fc;
  .filter-box {
    display: flex;
    align-items: center;
    font-size: 0.373333rem;
    color: #666666;

    i {
      margin-right: 0.053333rem;
    }
  }
}

//全部工单
.stay-whole-box {
  width: 100%;
  // height: 2.613333rem;
  margin-bottom: 0.213333rem;
  padding: 0.4rem 0.426667rem;
  background-color: #fff;
  .stay-whole-work-box {
    display: flex;
  }
  .stay-whole-work-icon-box {
    width: 1.12rem;
    height: 1.12rem;
    background: rgb(254, 240, 240);
    border-radius: 0.8rem;
    text-align: center;

    margin-right: 0.32rem;
    margin-top: 0.32rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stay-green-work-icon-box {
    width: 1.12rem;
    height: 1.12rem;
    background: rgb(240, 249, 235);
    border-radius: 0.8rem;
    text-align: center;

    margin-right: 0.32rem;
    margin-top: 0.32rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .stay-whole-icon-color {
    color: var(--color-red);
    font-size: 0.533333rem;
  }
  .stay-green-icon-color {
    color: var(--color-green);
    font-size: 0.533333rem;
  }
  .stay-whole-reight {
    width: 7.733333rem;
    position: relative;
    padding-left: 0.32rem;
  }
  .stay-whole-reight:before {
    content: '';
    position: absolute;
    top: -0.026667rem;
    left: 0;
    width: 1px;
    height: 90%;
    background-color: #f2f6fc;
  }

  .stay-whole-reight-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    van-tag {
      border: 0.026667rem solid #85aeff;
      padding: 0.053333rem 0.106667rem;
      border-radius: 0.053333rem;
    }
  }
  .stay-whole-reight-text-left {
    font-size: 0.4rem;
    color: rgb(51, 51, 51);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .stay-whole-reight-text-reight {
    font-size: 0.32rem;
    color: #999999;
    display: flex;
    span {
      color: rgb(113, 198, 70);
    }
  }
  .whole-work-state-icon-box-wait {
    width: 0.533333rem;
    height: 0.533333rem;
    background: rgb(255, 195, 41);
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-box-waitQueren {
    width: 0.533333rem;
    height: 0.533333rem;
    background: rgb(167, 136, 255);
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-box-complete {
    width: 0.533333rem;
    height: 0.533333rem;
    background: rgb(129, 228, 169);
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-box-cancel {
    width: 0.533333rem;
    height: 0.533333rem;
    background: rgb(244, 164, 118);
    border-radius: 0.8rem;
    text-align: center;
    padding-top: 0.08rem;
    padding-left: 1px;
    margin-right: 0.133333rem;
    margin-top: -0.08rem;
  }
  .whole-work-state-icon-color {
    color: #fff;
    font-size: 0.32rem;
  }

  .stay-reight-text-bootem {
    font-size: 0.346667rem;
    color: #666666;
    margin-top: 0.32rem;
    margin-bottom: 0.32rem;
  }
  .stay-whole-reight-text-bootem {
    font-size: 0.32rem;
    color: #999999;
  }
  .stay-whole-reight-text-bootem-reason {
    color: rgb(102, 102, 102);
    font-size: 0.32rem;
  }
  .stay-whole-reight-text-bootem-explain {
    color: rgb(102, 102, 102);
    font-size: 0.36rem;
  }
  .stay-icon-color-green {
    color: #67c23a !important;
  }
  .stay-work-icon-box-green {
    background: #f0f9eb !important;
  }
}
.whole-work-state-icon-box-processing {
  width: 0.533333rem;
  height: 0.533333rem;
  background: rgb(118, 182, 255);
  border-radius: 0.8rem;
  text-align: center;
  padding-top: 0.08rem;
  padding-left: 1px;
  margin-right: 0.133333rem;
  margin-top: -0.08rem;
}
.whole-work-state-icon-box-recovery {
  width: 0.533333rem;
  height: 0.533333rem;
  // background: rgb(118, 182, 255);
  border-radius: 0.8rem;
  text-align: center;
  padding-top: 0.08rem;
  padding-left: 1px;
  margin-right: 0.133333rem;
  margin-top: -0.08rem;
  color: rgb(113, 198, 70);
}
</style>
